<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .center-block {
  margin-left: 200px;
  margin-right: auto;}


   .center-block2 {
            float: right;
            margin-right: 200px;
            font-size:large;
            color:white;
            margin-top: 30px;
            text-decoration: none;
        }
        .center-block3 {
            float: right;
            margin-right: 20px;
            font-size:large;
            color:white;
            margin-top: 30px;
            text-decoration: none;
        }
        .center-block4{
            height: 60px;
            font-size: 60px;color: white;
            font-weight: bold;
            margin-right: 270px;
            float: right;
            text-shadow:2px 4px 3px green ;
        }
        .center-block5{
            height: 60px;
            font-size: 22px;color: white;
            margin-top: 20px;
            margin-right: 550px;
            float: right;

        }
        .center-block6{
            height: 30px;
            font-size: 22px;color: white;
            margin-right: 630px;
                margin-top: -20px;
            float: right;
                text-align: center;
        }
        .center-block7{
            height: 30px;
            font-size: 12px;color:gainsboro;
            margin-right: 50px;
                margin-top: 20px;
            float: right;
                text-align: center;
        }
          .center-block8{
              background-color:white;
                height: 600px;
                margin-top: 30px;
                padding-left: 50px;
                text-align: center;
        }
          .center-block9{
              background-color: green;
                height: 30px;
                margin-top: 30px;
                padding-left: 50px;
                text-align: center;
        }
            .table
  {
  border-collapse:collapse;
                height: 100px;
                width: 1200px;
                margin-top: 70px;
  }

table,tr
  {
  border:1px solid whitesmoke;
  }
    </style>
</head>
<body>
<form style="height: 2000px">
    <div style="background-color:whitesmoke;height: 455px;width: 100%">
    <div style="background-color: #27AE60;height: 400px;width: 100%" class="form-horizontal">
    <div class="form-group" style="height: 30px"></div>
            <div><img src="ico_1.png" style="height: 70px;width: 130px" class="center-block">
            <a class="center-block2" style="width: 50px;height: 50px" href="https://www.bootcdn.cn/#about">关于</a>
            <a class="center-block3" style="width: 50px;height: 50px" href="https://blog.bootcdn.cn/">博客</a>
            <a class="center-block3" style="width: 50px;height: 50px" href = "https://www.bootcdn.cn/api/">API</a>
            </div>
    <div class="center-block4">BootCDN</div>
    <div class="center-block5">稳定，快速，免费的前端开源项目CDN加速服务</div>
    <div class="center-block6">共收录了3382个前端开源项目</div>
    <div><center><textarea rows="2" cols="70" style=" margin-top: 20px;font-size: 22px;text-align: center" placeholder="搜索开源库，例如：jquery"></textarea></center></div>
    </div>
    <div class = "row" style="padding-left: 450px;">
        <img src="vue.svg" style="height: 50px;width: 50px;padding-left: 100px">
        <img src = "momentjs.svg" style = "height:50px;width: 50px;padding-left: 100px">
        <img src = "lodash.svg" style="height: 50px;width: 50px;padding-left: 100px">
    </div>
    </div>
    <div class="center-block7">拒绝流量劫持，全面使用HTTPS!</div>
    <center>
    <table class = "table table-bordered">
        <tr>
            <th >bootstrap</th>
            <td >Bootstrap是全球最受欢迎的前端组件库</td>
            <tr>
                <td></td>
                <td>*124952</td>
            </tr>
        </tr>
        <tr>
            <th>react</th>
            <td>react是用于构建用户界面的JavaScript的工具库</td>
            <tr>
                <td></td>
                <td>*96958</td>
            </tr>
        </tr>
    </table>
    </center>
</form>
</body>
</html>